<template>
    <div>
      <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
        title="关联三维课件"
        :visible="open"
        width="500px"
        append-to-body
        @close="cancel()"
      >
        <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item :label="`${$courseName?$courseName:'课程'}名称`" prop="fileName">
            <el-input
          v-input-restrict
              v-model="form.fileName"
              maxlength="20"
              show-word-limit
              :placeholder="`请输入${$courseName?$courseName:'课程'}名称`"
            />
          </el-form-item>
          <el-form-item label="资源链接" prop="fileUrl">
            <el-input
          v-input-restrict
              v-model="form.fileUrl"
              placeholder="请输入资源链接"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick @click="cancel">取 消</el-button>
          <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>

        </div>
      </el-dialog>
    </div>
  </template>

  <script>
  export default {
    props: {
      open: Boolean,
    },
    data() {
      return {
        // 表单参数
        form: {
          fileName: undefined,
          fileUrl: undefined,
          type:0
        },
        // 表单校验
        rules: {
          fileName: [
            { required: true, message: `${this.$courseName?this.$courseName:'课程'}名称不能为空`, trigger: "blur" },
          ],
          fileUrl: [
            { required: true, message: "资源链接不能为空", trigger: "blur" },
          ],
        },
      };
    },
    mounted() {},
    watch: {
      open(e) {
        if (e) {
          this.reset();
        }
      },
    },
    methods: {
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.form));
            this.$modal.msgSuccess("新增成功");
            this.$emit("refresh", obj);
            this.$emit("update:open", false);
          }
        });
      },
      // 表单重置
      reset() {
        this.form = {
          fileName: undefined,
          fileUrl: undefined,
          type:0
        };
        this.resetForm("form");
      },
      cancel() {
        this.$emit("update:open", false);
        this.reset();
      },
    },
  };
  </script>
  <style scoped lang="scss"></style>
